<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端测试工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .info-card {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 12px;
            border-left: 4px solid #667eea;
        }
        
        .info-card h3 {
            color: #333;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .info-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }
        
        .device-info {
            background: #fff8e1;
            border-left-color: #ffa500;
        }
        
        .performance-info {
            background: #e8f5e9;
            border-left-color: #4caf50;
        }
        
        .screen-info {
            background: #e3f2fd;
            border-left-color: #2196f3;
        }
        
        .test-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: #f5f5f5;
            color: #333;
        }
        
        .btn-secondary:hover {
            background: #e0e0e0;
        }
        
        .tips {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .tips h3 {
            color: #856404;
            margin-bottom: 10px;
        }
        
        .tips ul {
            margin-left: 20px;
            color: #856404;
        }
        
        .tips li {
            margin-bottom: 8px;
        }
        
        .status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .status.good {
            background: #4caf50;
            color: white;
        }
        
        .status.warning {
            background: #ff9800;
            color: white;
        }
        
        .status.bad {
            background: #f44336;
            color: white;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
            
            .test-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📱 移动端适配测试工具</h1>
        <p class="subtitle">检测当前设备信息和浏览体验</p>
        
        <div class="info-grid">
            <div class="info-card screen-info">
                <h3>屏幕信息</h3>
                <div class="value" id="screenSize">-</div>
                <small id="deviceType">检测中...</small>
            </div>
            
            <div class="info-card device-info">
                <h3>设备类型</h3>
                <div class="value" id="deviceName">-</div>
                <small id="userAgent">-</small>
            </div>
            
            <div class="info-card performance-info">
                <h3>设备性能</h3>
                <div class="value" id="performance">-</div>
                <small id="performanceDetails">-</small>
            </div>
            
            <div class="info-card">
                <h3>像素比</h3>
                <div class="value" id="pixelRatio">-</div>
                <small>设备像素比</small>
            </div>
            
            <div class="info-card">
                <h3>触摸支持</h3>
                <div class="value" id="touchSupport">-</div>
                <small id="touchPoints">-</small>
            </div>
            
            <div class="info-card">
                <h3>网络状态</h3>
                <div class="value" id="networkStatus">-</div>
                <small id="networkType">-</small>
            </div>
        </div>
        
        <div class="tips">
            <h3>💡 测试建议</h3>
            <ul>
                <li>尝试横竖屏切换，观察布局是否正常</li>
                <li>测试触摸卡片的反馈效果</li>
                <li>检查滚动是否流畅</li>
                <li>观察动画是否卡顿</li>
                <li>测试音频播放功能</li>
            </ul>
        </div>
        
        <div class="test-buttons">
            <button class="btn btn-primary" onclick="goToMain()">
                🚀 进入主页面
            </button>
            <button class="btn btn-secondary" onclick="testOrientation()">
                🔄 测试方向锁定
            </button>
            <button class="btn btn-secondary" onclick="testPerformance()">
                ⚡ 性能测试
            </button>
            <button class="btn btn-secondary" onclick="testTouch()">
                👆 触摸测试
            </button>
        </div>
        
        <div id="testResults" style="margin-top: 20px;"></div>
    </div>
    
    <script>
        // 获取设备信息
        function getDeviceInfo() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const dpr = window.devicePixelRatio || 1;
            
            // 屏幕尺寸
            document.getElementById('screenSize').textContent = `${width} × ${height}`;
            
            // 设备类型
            let deviceType = 'Desktop';
            let deviceStatus = 'good';
            
            if (width <= 480) {
                deviceType = '小屏手机';
                deviceStatus = 'warning';
            } else if (width <= 768) {
                deviceType = '中屏手机/平板';
                deviceStatus = 'good';
            } else {
                deviceType = 'PC/大屏';
                deviceStatus = 'good';
            }
            
            document.getElementById('deviceType').innerHTML = 
                `${deviceType} <span class="status ${deviceStatus}">适配良好</span>`;
            
            // 设备名称
            const ua = navigator.userAgent;
            let deviceName = 'Unknown';
            
            if (/iPhone/i.test(ua)) deviceName = 'iPhone';
            else if (/iPad/i.test(ua)) deviceName = 'iPad';
            else if (/Android/i.test(ua)) deviceName = 'Android';
            else if (/Windows/i.test(ua)) deviceName = 'Windows';
            else if (/Mac/i.test(ua)) deviceName = 'Mac';
            
            document.getElementById('deviceName').textContent = deviceName;
            document.getElementById('userAgent').textContent = 
                ua.substring(0, 50) + '...';
            
            // 性能
            const cores = navigator.hardwareConcurrency || 'Unknown';
            const memory = navigator.deviceMemory || 'Unknown';
            
            let perfStatus = 'good';
            let perfText = '高性能';
            
            if (cores < 4 || memory < 4) {
                perfStatus = 'warning';
                perfText = '中等性能';
            }
            if (cores < 2 || memory < 2) {
                perfStatus = 'bad';
                perfText = '低性能';
            }
            
            document.getElementById('performance').innerHTML = 
                `<span class="status ${perfStatus}">${perfText}</span>`;
            document.getElementById('performanceDetails').textContent = 
                `CPU核心: ${cores}, 内存: ${memory}GB`;
            
            // 像素比
            document.getElementById('pixelRatio').textContent = dpr.toFixed(2) + 'x';
            
            // 触摸支持
            const hasTouch = 'ontouchstart' in window;
            const maxTouchPoints = navigator.maxTouchPoints || 0;
            
            document.getElementById('touchSupport').innerHTML = 
                hasTouch ? '<span class="status good">支持</span>' : 
                '<span class="status bad">不支持</span>';
            document.getElementById('touchPoints').textContent = 
                `最多 ${maxTouchPoints} 个触点`;
            
            // 网络状态
            const online = navigator.onLine;
            const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
            
            document.getElementById('networkStatus').innerHTML = 
                online ? '<span class="status good">在线</span>' : 
                '<span class="status bad">离线</span>';
            
            if (connection) {
                const effectiveType = connection.effectiveType || 'Unknown';
                document.getElementById('networkType').textContent = 
                    `连接类型: ${effectiveType}`;
            } else {
                document.getElementById('networkType').textContent = '无法检测';
            }
        }
        
        // 进入主页面
        function goToMain() {
            window.location.href = 'index.html';
        }
        
        // 测试方向
        function testOrientation() {
            const orientation = window.orientation !== undefined ? 
                window.orientation : screen.orientation.angle;
            
            const resultsDiv = document.getElementById('testResults');
            resultsDiv.innerHTML = `
                <div class="tips">
                    <h3>📐 屏幕方向信息</h3>
                    <p>当前角度: ${orientation}°</p>
                    <p>屏幕方向: ${window.innerWidth > window.innerHeight ? '横屏' : '竖屏'}</p>
                    <p>请尝试旋转设备，观察页面是否正常适配</p>
                </div>
            `;
        }
        
        // 性能测试
        function testPerformance() {
            const start = performance.now();
            
            // 简单的性能测试
            for (let i = 0; i < 1000000; i++) {
                Math.sqrt(i);
            }
            
            const end = performance.now();
            const time = (end - start).toFixed(2);
            
            let status = 'good';
            let message = '性能优秀';
            
            if (time > 50) {
                status = 'warning';
                message = '性能一般';
            }
            if (time > 100) {
                status = 'bad';
                message = '性能较差';
            }
            
            const resultsDiv = document.getElementById('testResults');
            resultsDiv.innerHTML = `
                <div class="tips">
                    <h3>⚡ 性能测试结果</h3>
                    <p>计算耗时: ${time}ms <span class="status ${status}">${message}</span></p>
                    <p>建议: ${time > 50 ? '动画可能会有轻微卡顿，已自动优化' : '设备性能良好，可流畅运行'}</p>
                </div>
            `;
        }
        
        // 触摸测试
        function testTouch() {
            const resultsDiv = document.getElementById('testResults');
            resultsDiv.innerHTML = `
                <div class="tips">
                    <h3>👆 触摸测试区域</h3>
                    <div id="touchArea" style="
                        background: linear-gradient(135deg, #667eea, #764ba2);
                        height: 200px;
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-size: 18px;
                        margin-top: 10px;
                        user-select: none;
                    ">
                        触摸这里进行测试
                    </div>
                    <p id="touchInfo" style="margin-top: 10px; color: #666;">
                        等待触摸...
                    </p>
                </div>
            `;
            
            const touchArea = document.getElementById('touchArea');
            const touchInfo = document.getElementById('touchInfo');
            
            let touchStartTime = 0;
            
            touchArea.addEventListener('touchstart', (e) => {
                touchStartTime = Date.now();
                touchArea.style.transform = 'scale(0.95)';
                touchInfo.textContent = `触摸开始 - 触点数: ${e.touches.length}`;
            });
            
            touchArea.addEventListener('touchmove', (e) => {
                const touch = e.touches[0];
                touchInfo.textContent = `触摸移动 - 位置: (${Math.round(touch.clientX)}, ${Math.round(touch.clientY)})`;
            });
            
            touchArea.addEventListener('touchend', (e) => {
                const duration = Date.now() - touchStartTime;
                touchArea.style.transform = 'scale(1)';
                touchInfo.innerHTML = `
                    触摸结束 - 持续时间: ${duration}ms 
                    <span class="status good">响应正常</span>
                `;
            });
        }
        
        // 页面加载时获取设备信息
        window.addEventListener('load', () => {
            getDeviceInfo();
        });
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            setTimeout(getDeviceInfo, 100);
        });
        
        // 监听方向变化
        window.addEventListener('orientationchange', () => {
            setTimeout(getDeviceInfo, 300);
        });
    </script>
</body>
</html>

